<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../../lib/reset.css/reset.css"> -->

    <style>
       .box{
           width: 600px;
           height:600px;
           border:1px solid royalblue;
           margin:0 auto;
           background: url(images/banner.png) no-repeat;
           background-size:100% 100%;
           position: relative;
       } 
       .header{
           text-align: center;
           height:50px;
           background:thistle;
           line-height: 50px;
          
       }
       .main{
           height: 350px;
           Overflow:auto
           
          
       }
       .main figure {
           margin-left: 10px;
           margin-right: 5px;
       }
       .main figure img{
           width: 50px;
           height: 50px;
           border-radius:50%;
       }
       .footer{
        border-top:rgb(165, 52, 165) 1px solid ;
            height: 199px;
            position: relative;
           
       }
       .boxEdit{
            width: 100%;
            height: 100%;
            margin-bottom: 5px;   
            color:white;         
        }
        #upload{
            height: 40px;
            width: 70px;
            position:absolute;
            bottom:0 ;
            right:94px;
            border-radius:20%;   
            background-image: url(images/head.jpg);
            background-size:100% 100%; 
            background-repeat: no-repeat;
        }
        .btn{
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            position: absolute;
            bottom:0;
            right:10px;
            border-radius: 20%;
            background:turquoise;
        }
       
        .time{
            text-align: center;
        }
        .textImgLeft{
            display: flex;
            align-items: center;
        }
        .textImgRight{
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
        }
        .text p{
            padding: 3px 6px;
            border: 15px solid transparent;
            border-image: url(images/气泡1.png) 15 15 fill stretch;
        }    

    </style>
</head>
<body>
    <div class="box">
        <div class="header">
          小
        </div>  
        <div class="main">
            <!-- <div class="item">
                <div class="time">123</div>
                <div class="textImgRight">
                    <figure><img src="/images/head.jpg" alt=""></figure>
                    <p>护发好好干</p>
                </div>
        </div>
        <div class="item">
            <div class="time">456</div>
            <div class="textImgLeft">
                <figure><img src="/images/head.jpg" alt=""></figure>
                <p>护发好好干</p>
            </div> -->
        </div>           
       
        <div class="footer">
            <input type="file" id="file" hidden>           
            <div id="upload"></div>
            <div class="boxEdit" contenteditable="true"></div>
            <div class="btn">发送</div>
        </div>  
    </div>        
</body>
<script>
 // 目标 开启websocket
        // 在onmessage中进行渲染
        // img
        var btn = document.querySelector('.btn');
        var boxEdit = document.querySelector('.boxEdit');
        var list = document.querySelector('.main');
        var file = document.querySelector('#file');
        var upload = document.querySelector('#upload');
        var timer = '';
        var socket = new WebSocket('ws://localhost:4080');
        
        upload.onclick = function(){
            file.click();
        }
        //监视
        file.onchange = function(){
            console.log(this.files);
            console.log(this.files[0]);
            var f = this.files[0];
            var fr = new FileReader(); //文件读取
            fr.readAsDataURL(f);//把图片变为base64格式
            console.log(fr);
            fr.onload = function(){
                socket.send(JSON.stringify({
                    name:'浩',
                    msg:boxEdit.innerHTML,
                    img:fr.result,
                    time: new Date().format('yyyy-MM-dd HH:mm:ss'),
                }))
            }
        }


        socket.onopen = function(){
            console.log('socket open');
        }
        btn.onclick = function(e){
            socket.send(JSON.stringify({
                name:'浩',
                msg:boxEdit.innerHTML,
                time: new Date().format('yyyy-MM-dd HH:mm:ss'),
            }))
            boxEdit.innerHTML = '';
        }
        boxEdit.onkeyup = function(e){
            if(e.keyCode == 13){
                btn.onclick();
            }
        }


        socket.onmessage = function(e){
            console.log(e.data);
            var data = JSON.parse(e.data);
            console.log(data.msg);
            console.log(data.msg.slice(0,-15));
            var reg = /<[^>]+>/;
            if(reg.test(data.msg)) data.msg = data.msg.slice(0,-15);
            var user = '浩';
            //if timer ==''  ||  当前时间 new Date().getTime()  -  上一次存储的时间(timer) new Date(timer).getTime() > 6000
            var panduan = timer == '' || new Date().getTime() - new Date(timer).getTime() >=6000;
            if(data.name == user){
                if(data.img){
                    list.innerHTML += `<div class="item">`;
                    if(panduan) list.innerHTML += `<div class="time">${data.time}</div>`;
                    list.innerHTML += `<div class="textImgRight text">
                                        <figure><img src="images/head.jpg" alt=""></figure>
                                        <p>${data.msg}<img src="${data.img}"></p>
                                    </div>
                                </div>`;
                }else{
                    list.innerHTML += `<div class="item">`;
                    if(panduan) list.innerHTML += `<div class="time">${data.time}</div>`;
                    list.innerHTML += `<div class="textImgRight text">
                                        <figure><img src="images/head.jpg" alt=""></figure>
                                        <p>${data.msg}</p>
                                    </div>
                                </div>`;
                }
                
            }else{
                if(data.img){
                    list.innerHTML += `<div class="item">`;
                    if(panduan) list.innerHTML += `<div class="time">${data.time}</div>`;
                    list.innerHTML += `<div class="textImgLeft text">
                                        <figure><img src="images/head.jpg" alt=""></figure>
                                        <p>${data.msg}<img src="${data.img}"></p>
                                    </div>
                                </div>`;
                }else{
                    list.innerHTML += `<div class="item">`;
                    if(panduan) list.innerHTML += `<div class="time">${data.time}</div>`;
                    list.innerHTML += `<div class="textImgLeft text">
                                        <figure><img src="images/head.jpg" alt=""></figure>
                                        <p>${data.msg}</p>
                                    </div>
                                </div>`;
                }
                

            }
            timer = data.time;
            var html = document.querySelector('html');
            html.scrollTop = html.offsetHeight;

            
           

        }
        socket.onclose = function(event){
            console.log('close');
        }



        Date.prototype.format = function (fmt) { 
			var o = {
				"M+": this.getMonth() + 1, //月份 
				"d+": this.getDate(), //日 
				"H+": this.getHours(), //小时 
				"h+": this.getHours() > 12 ? this.getHours() -12 : this.getHours(), //小时 
				"m+": this.getMinutes(), //分 
				"s+": this.getSeconds(), //秒 
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
				"S": this.getMilliseconds() //毫秒 
			};
			if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		}

</script>
</html>